{extend name="common:base" /}
{block name="style"}
<link rel="stylesheet" href="{{admin}}/lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="{{admin}}/lib/codemirror/addon/fold/foldgutter.css">
<link rel="stylesheet" href="{{admin}}/lib/codemirror/theme/monokai.css">
<style>
    .CodeMirror div.CodeMirror-cursor {
        border-left: 1px solid #ffffff;
    }

    .CodeMirror {
        border: 1px solid #eee;
        font-size: 16px !important;
        line-height: 22px !important;
    }
</style>
{/block}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                    <li>规格参数</li>
                    <li>图片/特色</li>
                    <li>PC详情</li>
                    <li>Mobile详情</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label for="category_id" class="layui-form-label">
                                <span class="x-red">*</span>分类
                            </label>
                            <div class="layui-input-inline">
                                <select name="category_id" lay-verify="required" id="category_id">
                                    <option value="0">顶级</option>
                                    {notempty name='category'}
                                    {volist name="category" id="vo"}
                                    <option value="{$vo.id}" {if($data.category_id==$vo.id)}selected{/if}>
                                        {$vo.name}</option>
                                    {/volist}
                                    {/notempty}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="hot" class="layui-form-label">
                                <span class="x-red">*</span>热门
                            </label>
                            <div class="layui-input-block" id="hot">
                                <input type="radio" name="hot" value="1" title="是" {if($data.hot==1)}checked{/if}>
                                <input type="radio" name="hot" value="2" title="否" {if($data.hot==2)}checked{/if}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="listorder" class="layui-form-label">
                                <span class="x-red">*</span>排序
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="listorder" name="listorder" required="" lay-verify="required"
                                    autocomplete="off" class="layui-input" value="{$data.listorder}">

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="title" class="layui-form-label">
                                <span class="x-red">*</span>产品标题
                            </label>
                            <div class="layui-input-block w50">
                                <input type="text" id="title" name="title" required="" lay-verify="required"
                                    autocomplete="off" class="layui-input" value="{$data.title}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="keywords" class="layui-form-label">
                                <span class="x-red">*</span>关键词
                            </label>
                            <div class="layui-input-block w50">
                                <input type="text" id="keywords" name="keywords" required="" lay-verify="required"
                                    autocomplete="off" class="layui-input" value="{$data.keywords}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="model" class="layui-form-label">
                                <span class="x-red">*</span>型号
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="model" name="model" required="" lay-verify="required"
                                    autocomplete="off" class="layui-input" value="{$data.model}">

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="ean" class="layui-form-label">
                                EAN
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="ean" name="ean" required="" lay-verify="required"
                                    autocomplete="off" class="layui-input" value="{$data.ean}">

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="description" class="layui-form-label">
                                <span class="x-red">*</span>描述
                            </label>
                            <div class="layui-input-block w50">
                                <textarea name="description" id="description"
                                    class="layui-textarea">{$data.description}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-input-block">
                            <textarea name="specifications" id="specifications" class="layui-textarea"
                                lay-verify="specifications">{$data.specifications}</textarea>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label for="thumbnail" class="layui-form-label">
                                缩略图
                            </label>
                            <div class="layui-input-inline">
                                <button class="layui-btn" type="button"
                                    onclick="xadmin.open('添加缩略图','{:url(\'media_select_image\',[\'path\'=>\'images\/\',\'class\'=>\'image\'])}')">
                                    <i class="layui-icon"></i>选择</button>
                                <div class="image" style="height: 92px;padding-top: 5px">
                                    <img src="{$data.thumbnail}" alt="" style="height: 92px">
                                    <input type="hidden" name="thumbnail" value="{$data.thumbnail}" id="thumbnail">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                相册
                            </label>
                            <div class="layui-input-block">
                                <button class="layui-btn" type="button"
                                    onclick="xadmin.open('选择图片','{:url(\'media_select_image\',[\'path\'=>\'images\/\',\'class\'=>\'image\'])}')"><i
                                        class="layui-icon"></i>选择</button>
                                <blockquote class="layui-elem-quote layui-quote-nm"
                                    style="margin-top: 10px;min-height: 100px">
                                    <div class="img-list" id="img-list">
                                        {notempty name="data.albums"}
                                        {volist name="data.albums" id="vo"}
                                        <img src="{$vo.path}" alt="" style="height: 92px;padding-right: 5px;">
                                        <input type="hidden" name="album[]" value="{$vo.path}">
                                        {/volist}
                                        {/notempty}
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="features" class="layui-form-label">
                                特色描述
                            </label>
                            <div class="layui-input-block">
                                <textarea name="features" id="features" class="layui-textarea"
                                    lay-verify="features">{$data.features}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <textarea name="desktop" id="desktop" placeholder="请输入内容" class="layui-textarea"
                                    lay-verify="desktop">{$data.content.desktop}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <textarea name="mobile" id="mobile" class="layui-textarea"
                                    lay-verify="mobile">{$data.content.mobile}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <input name="id" type="hidden" value="{$data.id}">
                <button class="layui-btn" lay-filter="add" lay-submit="">
                    保存
                </button>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="copyright"}
{/block}
{block name="javascript"}
<script src="{{admin}}/lib/codemirror/lib/codemirror.js"></script>
<script src="{{admin}}/lib/codemirror/addon/edit/closetag.js"></script>
<script src="{{admin}}/lib/codemirror/addon/fold/foldcode.js"></script>
<script src="{{admin}}/lib/codemirror/addon/fold/foldgutter.js"></script>
<script src="{{admin}}/lib/codemirror/addon/fold/brace-fold.js"></script>
<script src="{{admin}}/lib/codemirror/addon/fold/xml-fold.js"></script>
<script src="{{admin}}/lib/codemirror/addon/fold/comment-fold.js"></script>
<script src="{{admin}}/lib/codemirror/mode/xml/xml.js"></script>
<script src="{{admin}}/lib/codemirror/mode/javascript/javascript.js"></script>
<script src="{{admin}}/lib/codemirror/mode/css/css.js"></script>
<script src="{{admin}}/lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script>
    window.onload = function () {
        window.desktop = CodeMirror.fromTextArea(document.getElementById("desktop"), {
            mode: "text/html",
            lineNumbers: true,
            lineWrapping: true,
            extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } },
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            theme: "monokai",
        });
        desktop.setSize('', '950px');
        // desktop.foldCode(CodeMirror.Pos(13, 0));
        // desktop.foldCode(CodeMirror.Pos(1, 0));
        window.mobile = CodeMirror.fromTextArea(document.getElementById("mobile"), {
            mode: "text/html",
            lineNumbers: true,
            lineWrapping: true,
            extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } },
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            theme: "monokai",
        })
        mobile.setSize('', '950px');
        // mobile.foldCode(CodeMirror.Pos(13, 0));
        // mobile.foldCode(CodeMirror.Pos(1, 0));
    }
    layui.extend({ tinymce: '{{admin}}/lib/extend/tinymce/tinymce' }).use(['form', 'layer', 'upload', 'tinymce', 'jquery'],
        function () {
            let $ = layui.jquery;
            let form = layui.form, upload = layui.upload, tinymce = layui.tinymce, layer = layui.layer;
            tinymce.render({ elem: "#features", height: 300, plugins: 'code', toolbar: 'code', menubar: false, forced_root_block: false, });
            tinymce.render({ elem: "#specifications", height: 300, plugins: 'code', toolbar: 'code', menubar: false, forced_root_block: false, });
            /*tinymce.render({elem: "#desktop", height: $(window).height()-80,
                plugins: 'code autosave quickbars print preview searchreplace autolink fullscreen image link media codesample table charmap hr advlist lists wordcount imagetools indent2em',
                toolbar: 'code undo redo | forecolor backcolor bold italic underline strikethrough | indent2em alignleft aligncenter alignright alignjustify outdent indent | link bullist numlist image table codesample | formatselect fontselect fontsizeselect',
                menubar:false,
                forced_root_block:false,
                paste_webkit_styles: true,
                images_upload_url:''
            });*/
            /*tinymce.render({elem: "#mobile", height: $(window).height()-80,
                plugins: 'code autosave quickbars print preview searchreplace autolink fullscreen image link media codesample table charmap hr advlist lists wordcount imagetools indent2em',
                toolbar: 'code undo redo | forecolor backcolor bold italic underline strikethrough | indent2em alignleft aligncenter alignright alignjustify outdent indent | link bullist numlist image table codesample | formatselect fontselect fontsizeselect',
                menubar:false,
                paste_webkit_styles: true,
                forced_root_block:false,
            });*/
            form.verify({
                features: function () {
                    tinyMCE.get("features").save()
                },
                specifications: function () {
                    tinyMCE.get("specifications").save()
                },
                desktop: function () {
                    window.desktop.save();
                    // tinyMCE.get("desktop").save() //好苦啊，tinyMCE需要这样保存到input框
                },
                mobile: function () {
                    window.mobile.save();
                    // tinyMCE.get("mobile").save()
                }
            });
            //监听提交
            form.on('submit(add)',
                function (data) {
                    $.ajax({
                        url: "{:url('content_edit_product')}",
                        type: 'POST',
                        data: data.field,
                        'success': function (result) {
                            if (result.status === 1) {
                                layer.msg(result.message, { 'icon': 1, 'time': 1000 }, function () {
                                    xadmin.close();
                                    xadmin.father_reload();
                                });
                            } else {
                                layer.msg(result.message, { 'icon': 5, 'time': 8000 });
                            }
                        }
                    }, 'JSON');
                    return false;
                });
        });
</script>
{/block}